import React from 'react';
import styles from './index.less';
import { Card, Tabs, Icon } from 'antd';
import InitDataView from '@/pages/ManCenter/Faq/InitDataView/index';
import DetailDataView from '@/pages/ManCenter/Faq/DetailDataView/index';
import ImageDataView from '@/pages/ManCenter/Faq/ImageDataView/index';
import OtherDataView from '@/pages/ManCenter/Faq/OtherDataView/index';
import styled from 'styled-components';
import { connect } from 'dva';
import BaseComponent from '@/components/BaseComponent';

const { TabPane } = Tabs;
const TabContent = styled.div`
  margin-top: 16px;
`;

@connect(({ faq, loading }) => ({
  isLoading: loading.effects['faq/getListPageData'],
}))
class Faq extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      initKey: '1',
      // 初始数据
      initData: [{
        id: 1,
        title : '不合格原因中显示修改内镜诊断，或初始数据页面中，内镜诊断空白的',
        content: '方案维护中'
      },
        {
          id: 2,
          title : '有两个诊断导入后显示不出来比如急性胃炎，胆汁反流，导入后显示没有诊断，是什么原因',
          content: '方案维护中'
        },
        {
          id: 3,
          title : '明明都按内镜诊断名词填的，为啥都不对',
          content: '方案维护中'
        }],
      // 详情数据
      detailData: [{
        id: 1,
        title : '上传好的数据可以下载吗？',
        content: '方案维护中'
      },
        {
          id: 2,
          title : '合格数据存入正式表后在哪里查看？',
          content: '方案维护中'
        },
        {
          id: 3,
          title : '详情填写完整是哪个部分？',
          content: '方案维护中'
        }],
      // 图片上报
      imageData: [{
        id: 1,
        title : '怎么上传图片',
        content: '方案维护中'
      },
        {
          id: 2,
          title : '上传错了怎么办',
          content: '方案维护中'
        },
        {
          id: 3,
          title : '没上传怎么办',
          content: '方案维护中'
        }],
      // 其他问题
      otherData: [{
        id: 1,
        title : '提示身份证不合格',
        content: '方案维护中'
      },
        {
          id: 2,
          title : '应该用什么浏览器',
          content: '方案维护中'
        },
        {
          id: 3,
          title : '已存入正式表的数据可以删除吗',
          content: '方案维护中'
        }],
    };
  }

  tabChange = key => {
    this.setState({
      initKey: key,
    });
  };

  componentDidMount() {
    // this.getListPageData();
  }

  getListPageData = () => {
    this.execHttp('faq/getListPageData', {
      message: 'hello',
    }).then(resp => {
      const { success, data } = resp;
      if (success) {
        const { initData, detailData, imageData, otherData } = data;
        this.setState({
          initData,
          detailData,
          imageData,
          otherData,
        });
      }
    });
  };

  render() {
    return (
      <div className={styles.faq}>
        <Card bordered={true}>
          <div>
            <Tabs animated={false} activeKey={this.state.initKey} onChange={this.tabChange}>
              <TabPane tab="初始数据" key="1"></TabPane>
              <TabPane tab="详情数据" key="2"></TabPane>
              <TabPane tab="图片上报" key="3"></TabPane>
              <TabPane tab="其他问题" key="4"></TabPane>
            </Tabs>
          </div>
          {this.state.initKey === '1' ? (
            <TabContent>
              <TabContent>
                <InitDataView data={this.state.initData}></InitDataView>
              </TabContent>
            </TabContent>
          ) : null}
          {this.state.initKey === '2' ? (
            <TabContent>
              <TabContent>
                <DetailDataView data={this.state.detailData}></DetailDataView>
              </TabContent>
            </TabContent>
          ) : null}
          {this.state.initKey === '3' ? (
            <TabContent>
              <TabContent>
                <ImageDataView data={this.state.imageData}></ImageDataView>
              </TabContent>
            </TabContent>
          ) : null}
          {this.state.initKey === '4' ? (
            <TabContent>
              <TabContent>
                <OtherDataView data={this.state.otherData}></OtherDataView>
              </TabContent>
            </TabContent>
          ) : null}
        </Card>
      </div>
    );
  }
}

export default Faq;
